@media only screen and (min-width: 360px) {
  .need-margin-r {
    margin-right: 5.33%;
  }
}

@media only screen and (min-width: 800px) {

  .song-content-child {
    width: 38% !important;
  }

  .swiper-dayrecom-box {
    flex-direction: row !important;
  }

  .swiper-dayrecom-box .song-palylist {
    padding: 0 5.33% 0 2rem !important;
  }

  .swiper-dayrecom-box .swiper {
    padding: 0 0 0 5.33% !important;
  }


  .swiper-dayrecom-box .song-palylist .title {
    position: absolute;
    padding: 0.5rem !important;
  }

  .songlist .list .song-list-item {
    width: 45%;
    padding-right: 4%;
  }

  .player {
    padding: 0 25% !important;
  }

}

@media only screen and (min-width: 900px) and (min-height: 900px) {
  .player {
    justify-content: center !important;
  }
}

@media only screen and (min-width: 900px) and (min-height: 900px) {
  .player {
    justify-content: center !important;
  }
}

@media only screen and (min-width: 1280px) {
  .song-content-child {
    width: 25% !important;
  }
  .need-margin-r {
    margin-right: 0;
  }
}


@media (prefers-color-scheme: dark) {
  :root {
    --global-bg: rgba(0, 0, 0, .9) !important;
    --global-color: rgb(255, 255, 255) !important;
    --bottom-bar-color: rgb(106, 106, 106) !important;
    --bg: rgba(15, 15, 15, 0.6) !important;
    --message-bg: rgba(15, 15, 15, 0.9) !important;
  }
}